<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @add="handleAdd"
      @edit="handleUpdate"
    >

      <template #filter-content>
        <el-input v-model="listQuery.params.groupName" class="filter-item" size="small" style="width: 200px;" placeholder="群组名称" />
      </template>

      <template #data-columns>

        <el-table-column
          type="selection"
          width="55"
        />

        <el-table-column
          show-overflow-tooltip
          align="center"
          label="群组名称"
          prop="userName"
        >

          <template v-slot="scope">
            <detail-link :id="scope.row.id" :title="scope.row.groupName" permission="sys:group:update" @click="handleUpdate(scope.row.id, scope.row)" />
          </template>

        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          align="center"
          label="用户数量"
          prop="userCount"
        />

        <el-table-column
          show-overflow-tooltip
          align="center"
          label="创建时间"
          prop="createTime"
        />

        <el-table-column
          align="center"
          label="操作项"
        >

          <template v-slot="scope">
            <el-link v-permission="['sys:group:user:list']" type="primary" icon="el-icon-user" @click="drawerOpen(scope.row.id)">组内用户</el-link>
          </template>
        </el-table-column>

      </template>
    </data-table>

    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" title="群组管理" width="400px">

      <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="100px">
        <el-form-item label="群组名称" prop="groupName">
          <el-input v-model="postForm.groupName" size="small" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>

    </el-dialog>

    <el-drawer
      :wrapper-closable="false"
      :visible.sync="drawerVisible"
      title=" "
      size="50%"
      @close="drawerClose"
    >
      <div style="padding: 0 20px">
        <group-user-list :group-id="groupId"/>
      </div>
    </el-drawer>

  </div>

</template>

<script>
import permission from '@/directive/permission'
import { save } from '@/api/sys/group/group'
import GroupUserList from '@/views/admin/sys/group/components/GroupUserList/index.vue'

export default {
  directives: { permission },
  components: { GroupUserList },
  data() {
    return {

      dialogVisible: false,
      drawerVisible: false,
      groupId: '',

      listQuery: {
        current: 1,
        size: 10,
        params: {
          groupName: ''
        }
      },

      rules: {
        groupName: [
          { required: true, message: '群组不能为空！' }
        ]
      },

      postForm: {},
      options: {
        add: {
          enable: true,
          permission: 'sys:group:add'
        },
        edit: {
          enable: true,
          permission: 'sys:group:update'
        },
        delete: {
          enable: true,
          permission: 'sys:group:delete',
          url: '/api/sys/group/delete'
        },

        // 列表请求URL
        listUrl: '/api/sys/group/paging'
      }
    }
  },
  watch: {
    // 关闭窗口刷新
    drawerVisible: {
      handler(val) {
        if (!val) {
          this.$refs.pagingTable.getList()
        }
      }
    }
  },

  created() {

  },

  methods: {

    // 添加用户
    handleAdd() {
      this.postForm = { id: '' }
      this.dialogVisible = true
    },

    // 修改群组
    handleUpdate(id, row) {
      this.postForm = row
      this.dialogVisible = true
    },

    handleSave() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }

        save(this.postForm).then(() => {
          this.$message({
            type: 'success',
            message: '群组保存成功!'
          })
          this.dialogVisible = false
          this.$refs.pagingTable.getList()
        })
      })
    },

    drawerOpen(id) {
      this.groupId = id
      this.drawerVisible = true
    },

    drawerClose() {
      this.drawerVisible = false
    }
  }
}
</script>

<style scoped>

::v-deep .el-drawer__header{
  margin-bottom: 0;
  padding: 10px;
}
</style>
